<!--template  -->
<template>
    <div class='box'>
        <!-- <div id="container" style="width:100%;height:500px"> </div> -->
    </div>
</template>
<script >
import { toRefs, reactive, onMounted } from '@vue/composition-api'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
    setup() {
        const state = reactive({
            camera: null,
            scene: null,
            renderer: null,
            mesh: null,
            gltfLoader: null
        })

        onMounted(() => {
            init()
        })


        function init() {

            // 1、创建场景
            state.scene = new THREE.Scene();
            // 2、相机设置
            // 创建相机（眼球相机）
            state.camera =new THREE.PerspectiveCamera(
                90, document.body.clientWidth / document.body.clientHeight, 0.1, 100
            );
            state.camera.position.set(0, 0, 0.1);
            // 3、渲染器对象
            state.renderer = new THREE.WebGLRenderer({ antialias: true });
            state.renderer.setSize(document.body.clientWidth, document.body.clientHeight);
            document.body.appendChild(state.renderer.domElement); //body元素中插入canvas对象

            // 4、事件控制变化
            var controls = new OrbitControls(state.camera, state.renderer.domElement);//创建监控对象(相机,dom)

            // 5、创建材质
            var materials = [];
            //根据左右上下前后的顺序构建六个面的材质集
            var texture_left = new THREE.TextureLoader().load( 'vrimg/scene_left.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_left} ) );

            var texture_right = new THREE.TextureLoader().load( 'vrimg/scene_right.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_right} ) );

            var texture_top = new THREE.TextureLoader().load( 'vrimg/scene_top.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_top} ) );

            var texture_bottom = new THREE.TextureLoader().load( 'vrimg/scene_bottom.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_bottom} ) );

            var texture_front = new THREE.TextureLoader().load( 'vrimg/scene_front.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_front} ) );

            var texture_back = new THREE.TextureLoader().load( 'vrimg/scene_back.jpeg' );
            materials.push( new THREE.MeshBasicMaterial( { map: texture_back} ) );

            // 贴上材质，加入到场景中
            var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), materials );
            box.geometry.scale( 1, 1, -1 );
            state.scene.add(box);

            // 帧渲染
            animate()
        }

        function animate() {
            requestAnimationFrame(animate)
            state.renderer.render(state.scene, state.camera)
        }

        return {
            ...toRefs(state),
        };
    }
}

 </script>
 <style lang='scss' scoped>
</style>